<!-- 继承基础模板 -->
{% extends "base.html" %}

{% block title %}链家数据展示{% endblock %}

{% block div %}
<div id="#" style="text-align: center;"><h2 id="pt1" style="cursor:pointer;">租房类型统计</h2></div>
<div id="type_pie" style="width: 1000px;height: 600px;margin: 0 auto;display: none;"></div>

<div id="#" style="text-align: center;"><h2 id="pt2" style="cursor:pointer;">租房类型价格均值统计</h2></div>
<div id="type_bar" style="width: 800px;height: 600px;margin: 0 auto;display: none;"></div>

<div id="#" style="text-align: center;"><h2 id="pt3" style="cursor:pointer;">合租房类型价格均值统计</h2></div>
<div id="type_hz_line" style="width: 1000px;height: 600px;margin: 0 auto;display: none;"></div>

<div id="#" style="text-align: center;"><h2 id="pt4" style="cursor:pointer;">整租房类型价格均值统计</h2></div>
<div id="type_zz_line" style="width: 1000px;height: 600px;margin: 0 auto;display: none;"></div>

<div id="#" style="text-align: center;"><h2 id="pt5" style="cursor:pointer;">深圳各区租房价格均值统计</h2></div>
<div id="type_qu_bar" style="width: 1000px;height: 600px;margin: 0 auto;display: none;"></div>

<div id="#" style="text-align: center;"><h2 id="pt6" style="cursor:pointer;">深圳租房房源分布统计</h2></div>
<div id="type_fb_pie" style="width: 1000px;height: 600px;margin: 0 auto;display: none;"></div>
{% endblock %}

{% block script %}
<script>
// 利用异步加载，js发送请求
    // <!-- 初始化一个echarts实例 -->
    $("#pt1").bind("click", function(){
        // 实现显示和隐藏
        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. 
        var flag = $("#type_pie").is(":hidden");
        // 租房类型饼图
        var myChart = echarts.init(document.querySelector("#type_pie"));
        if(flag){
            //show() 方法: 使隐藏的变为显示
            $("#type_pie").show();
            $.get("{{url_for('get_pie_data')}}").done(function (data){
                myChart.setOption( 
                    {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: data['合租'], name: '合租' },
                            { value: data['整租'], name:  '整租' }
                        ]
                        }
                    ]
                    }
                )
            });
        }else{
            $("#type_pie").hide();
        }
    });


    $("#pt2").bind("click", function(){
        // 实现显示和隐藏
        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. 
        var flag = $("#type_bar").is(":hidden");
        // 租房类型价格条型图
        var myChart1 = echarts.init(document.querySelector("#type_bar"));
        if(flag){
            //show() 方法: 使隐藏的变为显示
            $("#type_bar").show();
            $.get("{{url_for('get_type_bar_data')}}").done(function (data){
                myChart1.setOption( 
                    {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                            type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                            type: 'category',
                            data: ['合租', '整租'],
                            axisTick: {
                                alignWithLabel: true
                            }
                            }
                        ],
                        yAxis: [
                            {
                            type: 'value'
                            }
                        ],
                        series: [
                            {
                            name: '元/月',
                            type: 'bar',
                            barWidth: '60%',
                            data: [data['合租'], data['整租']]
                            }
                        ]
                        }
                    
                )
            });
                
        }else{
            $("#type_bar").hide();
        }
    });
    

    $("#pt3").bind("click", function(){
        // 实现显示和隐藏
        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. 
        var flag = $("#type_hz_line").is(":hidden");
        // 租房类型饼图
        var myChart2 = echarts.init(document.querySelector("#type_hz_line"));
        if(flag){
            //show() 方法: 使隐藏的变为显示
            $("#type_hz_line").show();
            $.get("{{url_for('get_hz_line_data')}}").done(function (data){
                var key_ls = [];
                var data_ls = [];
                for (var key in data){
                    key_ls.push(key);
                    data_ls.push(data[key]);
                }
                myChart2.setOption( 
                    {
                        tooltip: {
                            trigger: 'axis'
                                },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: key_ls
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '元/月',
                                data: data_ls,
                            type: 'line',
                            areaStyle: {}
                            }
                        ]
                    })
                });

        }else{
            $("#type_hz_line").hide();
        }
    });


    $("#pt4").bind("click", function(){
        // 实现显示和隐藏
        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. 
        var flag = $("#type_zz_line").is(":hidden");
        // 租房类型饼图
        var myChart2 = echarts.init(document.querySelector("#type_zz_line"));
        if(flag){
            //show() 方法: 使隐藏的变为显示
            $("#type_zz_line").show();
            $.get("{{url_for('get_zz_line_data')}}").done(function (data){
                var key_ls = [];
                var data_ls = [];
                for (var key in data){
                    key_ls.push(key);
                    data_ls.push(data[key]);
                }
                myChart2.setOption( 
                    {
                        tooltip: {
                            trigger: 'axis'
                                },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: key_ls
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '元/月',
                                data: data_ls,
                            type: 'line',
                            areaStyle: {}
                            }
                        ]
                    })
                });

        }else{
            $("#type_zz_line").hide();
        }
    });

    $("#pt5").bind("click", function(){
        // 实现显示和隐藏
        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. 
        var flag = $("#type_qu_bar").is(":hidden");
        // 租房类型价格条型图
        var myChart1 = echarts.init(document.querySelector("#type_qu_bar"));
        if(flag){
            //show() 方法: 使隐藏的变为显示
            $("#type_qu_bar").show();
            $.get("{{url_for('get_type_qu_bar_data')}}").done(function (data){
                var key_ls = [];
                var data_ls = [];
                for (var key in data){
                    key_ls.push(key);
                    data_ls.push(data[key]);
                }
                myChart1.setOption( 
                    {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                            type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                            type: 'category',
                            data: key_ls,
                            axisTick: {
                                alignWithLabel: true
                            }
                            }
                        ],
                        yAxis: [
                            {
                            type: 'value'
                            }
                        ],
                        series: [
                            {
                            name: '元/月',
                            type: 'bar',
                            barWidth: '60%',
                            data: data_ls
                            }
                        ]
                        }
                    
                )
            });
                
        }else{
            $("#type_qu_bar").hide();
        }
    });
    
    $("#pt6").bind("click", function(){
        // 实现显示和隐藏
        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. 
        var flag = $("#type_fb_pie").is(":hidden");
        // 租房类型饼图
        var myChart = echarts.init(document.querySelector("#type_fb_pie"));
        if(flag){
            //show() 方法: 使隐藏的变为显示
            $("#type_fb_pie").show();
            $.get("{{url_for('get_fb_pie_data')}}").done(function (data){
                var key_ls = [];
                var data_ls = [];
                for (var key in data){
                    key_ls.push(key);
                    data_ls.push(data[key]);
                }
                myChart.setOption( 
                    {
                        legend: {
                            top: 'bottom'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                            }
                        },
                        series: [
                            {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                { value: data_ls[0], name: key_ls[0] },
                                { value: data_ls[1], name: key_ls[1] },
                                { value: data_ls[2], name: key_ls[2] },
                                { value: data_ls[3], name: key_ls[3]},
                                { value: data_ls[4], name: key_ls[4] },
                                { value: data_ls[5], name: key_ls[5] },
                                { value: data_ls[6], name: key_ls[6] },
                                { value: data_ls[7], name: key_ls[7] },
                                { value: data_ls[8], name: key_ls[8] },
                                { value: data_ls[9], name: key_ls[9] }
                            ]
                            }
                        ]
                    }
                )
            });
        }else{
            $("#type_fb_pie").hide();
        }
    });
</script>
{% endblock %}